<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/sys-admin/index' }" style="size: 16px">
                <i class="el-icon-s-promotion"></i>
                后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>品牌列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-divider></el-divider>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" align="center" width="60"></el-table-column>
            <el-table-column label="LOGO" align="center" width="60">
                <template slot-scope="scope">
                    <el-avatar :size="30" :src="scope.row.logo"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center" width="120"></el-table-column>
            <el-table-column prop="pinyin" label="拼音"header-align="center" width="100"></el-table-column>
            <el-table-column prop="description" label="简介" align="center"
                             :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="keywords" label="关键词列表" align="center"
                             :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="sort" label="排序序号" align="center" width="120"></el-table-column>

            <el-table-column prop="enable" label="是否启用" align="center" width="120">
                <template slot-scope="scope">
                    <el-switch
                            @change="updateEnable(scope.row)"
                            v-model="scope.row.enable"
                            active-color="#13ce66"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作"  align="center"width="100">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle size="mini"
                    @click="openEditDialog(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle size="mini"
                    @click="openDeleteConfirm(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--以下是弹出的修改品牌对话框-->
        <el-dialog title="编辑品牌"  :visible.sync="dialogFormVisible">
            <el-form :model="editForm" :rules="rules" ref="editForm" class="demo-ruleForm">
                <el-form-item label="LOGO" prop="logo" :label-width="formLabelWidth">
                    <el-input v-model="editForm.logo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="拼音" prop="pinyin" :label-width="formLabelWidth">
                    <el-input v-model="editForm.pinyin" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="description" :label-width="formLabelWidth">
                    <el-input v-model="editForm.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="关键词列表" prop="keywords" :label-width="formLabelWidth">
                    <el-input v-model="editForm.keywords" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
                    <el-input v-model="editForm.sort" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEditFrom()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {

        data() {
            return {
                tableData:[],
                editForm: {
                    id:'',
                    logo:'',
                    name: '',
                    pinyin: '',
                    description: '',
                    keywords: '',
                    sort: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入品牌名称', trigger: 'blur' },
                        { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输品牌描述', trigger: 'blur' },
                        { min: 2, max: 35, message: '长度在 2 到 35 个字符', trigger: 'blur' }
                    ],
                    sort: [
                        { required: true, message: '请输入排序序号', trigger: 'blur' },
                        { pattern:/^(\d{1}|[1-9]{1}[0-9]?)$/, message: '排序序号必须是 0~99 之间的数字', trigger: 'blur' }
                    ]
                },
                formLabelWidth: '120px',
                dialogFormVisible: false
            };
        },
        methods: {
            updateEnable(brand){
                console.log(brand.enable);
                let enableStatus=[
                    {url:'/disable',text:'禁用'},
                    {url:'/enable',text:'启用'}
                ];
                let url='http://localhost:9080/brands/'
                    +brand.id
                    +enableStatus[brand.enable].url;
                console.log('url:'+url);

                this.axios
                    .create({
                        headers:{
                            'Authorization':localStorage.getItem('jwt')
                        }
                    })
                    .post(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.$message({
                            message: enableStatus[brand.enable].text+'品牌成功!',
                            type: 'success'
                        });
                        this.loadBrandList();
                    }else if(responseBody.state==40400){
                        this.$alert(responseBody.message, '警告', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadBrandList();
                            }
                        });
                    }else {
                        this.$message.error(responseBody.message);
                    }
                })

            },
            openEditDialog(brand) {
                let url='http://localhost:9080/brands/'+brand.id;
                console.log('url='+url);
                this.axios
                    .create({
                        headers:{
                            'Authorization':localStorage.getItem('jwt')
                        }
                    })
                    .get(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.dialogFormVisible = true;
                        this.editForm=responseBody.data;
                    }else {
                        this.$alert(responseBody.message, '警告', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadBrandList();
                            }
                        });
                    }
                })
            },
            submitEditFrom(){
                console.log("处理编辑:"+this.editForm.id);
                let url='http://localhost:9080/brands/'+this.editForm.id+'/update';
                console.log('url='+url);
                let formData=this.qs.stringify(this.editForm)
                this.axios
                    .create({
                        headers:{
                            'Authorization':localStorage.getItem('jwt')
                        }
                    })
                    .post(url,formData).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.$message({
                            message: '品牌修改成功!',
                            type: 'success'
                        });
                        this.loadBrandList();
                        this.dialogFormVisible = false;

                    }else if(responseBody.state==40400){
                        this.$alert(responseBody.message, '警告', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadBrandList();
                                this.dialogFormVisible = false;
                            }
                        });
                    }else {
                        this.$message.error(responseBody.message);
                    }
                })


            },
            openDeleteConfirm(brand) {
                console.log("尝试删除:"+brand.name+",ID:"+brand.id);
                let message='此操作将永久删除该文件['+brand.name+'], 是否继续?';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(brand);
                }).catch(() => {
                });
            },
            handleDelete(brand){
              console.log('即将执行删除['+brand.name+'], ID='+brand.id);
                let url='http://localhost:9080/brands/'+brand.id+'/delete';
                console.log('url='+url);
                this.axios
                    .create({
                        headers:{
                            'Authorization':localStorage.getItem('jwt')
                        }
                    })
                    .post(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.$message({
                            message: '品牌删除成功!',
                            type: 'success'
                        });
                        this.loadBrandList();
                    }else if(responseBody.state==40400){
                        this.$alert(responseBody.message, '警告', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadBrandList();
                            }
                        });
                    }else {
                        this.$message.error(responseBody.message);
                    }
                })
            },
            loadBrandList(){
                let url='http://localhost:9080/brands';
                console.log('url='+url);
                let jwt=localStorage.getItem('jwt');
                console.log('jwt='+jwt);
                this.axios
                    .create({
                        headers:{
                            'Authorization':jwt,
                        }
                    })
                    .get(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.tableData=responseBody.data;
                    }
                })
            }
        },
        created() {
            console.log("created开始请求品牌列表数据");

        },
        mounted() {
            console.log("mounted开始请求品牌列表数据");
            this.loadBrandList();
        }
    }

</script>

